import React, { useState } from 'react';
import { Button, Form, Input, Checkbox, message } from 'antd';
import type { FormInstance } from 'antd/es/form';
import { useNavigate } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { changeNick } from '@/redux/store'
import axios from 'axios'
import af from './index.module.scss'
import { datas } from './formData'


const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

const App: React.FC = () => {
    const formRef = React.useRef<FormInstance>(null);

    const [messageApi, contextHolder] = message.useMessage();


    let umi = crypto.randomUUID().slice(0, 4)

    const [auth, setauth] = useState(umi)

    const navigate = useNavigate()
    const dispatch = useDispatch()

    const onFinish = (values: any) => {
        let url = 'http://localhost:2001/api/login'

        axios.post(url, values).then(res => {
            const { msg } = res.data
            if (res.data.status === 200) {
                if (values.authCode !== auth) {
                    let data = "验证码输入有误"
                    messageApi.open({
                        type: 'warning',
                        content: data,
                    });
                } else {
                    messageApi.open({
                        type: 'success',
                        content: msg,
                    });
                    sessionStorage.setItem('tokenMsg', JSON.stringify(res.data.token))
                    setTimeout(() => navigate('/afeng/home'), 1000)
                    dispatch(changeNick(values.account))
                }
            } else {
                messageApi.open({
                    type: 'warning',
                    content: msg,
                });
            }
        })

        // axios.post(url,values).then(res => {
        //    console.log(res);
        // })
    };

    const onReset = () => {
        formRef.current?.resetFields();
    };

    interface property {
        name: string,
        label: string,
        type: string,
        id: number,
        test:string,
    }

    return (
        <Form
            {...layout}
            ref={formRef}
            name="control-ref"
            onFinish={onFinish}
            style={{ maxWidth: 600, }}
        >
            {contextHolder}
            <div style={{ margin:'1rem 0',textAlign:'center' }}><img src="/vite.svg" alt="" width={40} height={40} /></div>
            {
                datas.map((item: property) => {
                    const { name, label, id, type, test } = item
                    return <Form.Item name={name} label={label} rules={[{ required: true ,message: test}]}  key={id} >
                        <Input type={type} style={{ background:'none',width:'10rem',fontWeight:'bold' }} />
                    </Form.Item>
                })
            }
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    登录
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    重置
                </Button>
            </Form.Item>
            <div className={af.auth}>{auth}</div>
        </Form>
    );
};

export default App;